<template>
  <div class="container">
    <page-header/>
    <el-menu
      :default-active="'-1'"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item :index="index+''" v-for="(item,index) in homeClassify" v-bind:key="index">
        <el-link :href="index < homeClassify.length - 1 ? '/?i='+index : '/classify'">{{item.channel_name}}</el-link>
      </el-menu-item>
    </el-menu>

    <h1 class="video_name">片名 : {{detail.title}}</h1>
    <div class="video_content">
      <video-player :title="videoTitle" :url="videoUrl" v-if="play" class="player"></video-player>
    </div>
    <div class="desc">{{detail.desc1}}</div>
    <div class="desc">{{detail.desc2}}</div>
    <div class="desc">{{detail.desc3}}</div>
    <div class="desc">简介:</div>
    <div class="desc">{{detail.desc}}</div>

    <el-tabs type="border-card">
      <el-tab-pane v-for="(item,index) in detail.chanelInfo" v-bind:key="index" :label="item.channelName">
        <el-row >
          <el-col :span="2" v-for="(item1,index1) in item.mVideoPlayInfos" v-bind:key="index1">
            <div class="video_item" @click="videoClick(item1.url)">
              {{item1.title}}
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import axios from "axios";
  import PageHeader from "~/components/PageHeader.vue";

  export default Vue.extend({
    components: {PageHeader},
    head:{
      title:"视频站详情页"
    },
    data() {
      return {
        play: false,
        videoTitle: '',
        videoUrl: '',
      }
    },
    methods: {
      videoClick:function (url:string) {
        this.videoUrl = url;
        this.play = true;
      }
    },
    async asyncData({params}) {
      let homeClassify = await axios.get('http://47.117.121.53:8080/down/daHai/homeClassify');
      let content = await axios.get('http://47.117.121.53:8080/down/daHai/detail?vid=' + params.vid);
      homeClassify.data.data.result.push({"channel_name": "分类"});

      return {
        homeClassify: homeClassify.data.data.result,
        detail: content.data.data,
      }
    }
  });
</script>

<style lang="scss">
  @import "assets/detail";
</style>
